<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.box {
			position:absolute; width: 100px; height: 100px; background: red;
			left: 0; top: 0;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<div class="box"></div>
		<button>显示</button>
		<button>隐藏</button>
		<button>淡入</button>
		<button>淡出</button>
		<button>展开</button>
		<button>收起</button>
		<button>收起或展开</button>
		<button>运动</button>
	</body>
	<script>
		$("button").eq(0).on("click",function(){
			$(".box").show(1000);
		});
		$("button").eq(1).on("click",function(){
			$(".box").hide(1000);
		});
		$("button").eq(2).on("click",function(){
			$(".box").fadeIn(5000);
		});
		$("button").eq(3).on("click",function(){
			$(".box").fadeOut(5000);
		});
		$(".box").toggle(
			function(){
				$(this).css("background","brown");
			},
			function(){
				$(this).css("background","cornflowerblue");
			}
		);
		$("button").eq(4).on("click",function(){
			$(".box").slideDown(500);
		});
		$("button").eq(5).on("click",function(){
			$(".box").slideUp(500);
		});
		$("button").eq(6).on("click",function(){
			$(".box").slideToggle(1000,function(){
				console.log("执行完成");
			})
		});
		$("button").eq(7).on("click",function(){
			$(".box").animate({left: 600, top: 300, width: 250, height: 250}, function(){
				console.log("运动结束");
			})
		});
		
		
	</script>
</html>
